<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>修改试题</title>
<%@include file="../core/head.jsp"%>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="${ctx }/css/core.css" type="text/css"></link>
<link rel="stylesheet" href="${ctx }/css/exam.css" type="text/css"></link>
<link rel="stylesheet" href="${ctx }/css/buttons.css" type="text/css"></link>
<script type="text/javascript" src="${ctx }/js/modules/exam/exam.js"></script>
<script type="text/javascript" src="${ctx}/js/modules/code/AjaxAuthFilter.js"></script>
<script type="text/javascript" src="${ctx}/js/modules/code/MessageBox.js"></script>

<link rel="stylesheet" href="${ctx}/js/jquery-ui-1.10.3/css/ui-lightness/jquery-ui-1.10.3.custom.css" type="text/css">
<script type="text/javascript" src="${ctx }/js/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.js"></script>
<style type="text/css">
#upload .title textarea {
	width: 100%;
	height: 90px;
	padding: 5px;
	border: 1px solid #f2f2f2;
	margin-top: 5px;
}

#upload .option {
	padding-left: 10px;
}

#upload .option input[type='text'] {
	width: 90%;
	height: 24px;
	line-height: 24px;
	padding: 5px;
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 1px solid #f2f2f2;
}

#addNew {
	width: 100px;
	height: 26px;
	font-size: 14px;
}

#upload .index {
	font-size: 14px;
	font-weight: bold;
}

#upload .help {
	display: block;
	background: #f2f2f2;
	border: 1px solid #f2f2f3;
}

#upload .analysis {
	width: 100%;
	height: 80px;
	padding: 2px;
	border: 1px solid #f2f2f2;
}

#templete {
	display: none;
}

#paperPanel {
	
}
</style>
<script type="text/javascript">
	 
	/**
	 * 保存按钮事件
	 */
	function saveQuestion(fid, but) {
		var form = $(fid).parents("form");
		var paperid = $("#paperId").val();
		if (!paperid || $.trim(paperid) == "") {
			$("#paperPanel").dialog("open").data("form", form);

		} else {
			ajaxSubmitQuestion(form);
		}

	}
	/**
	 * AJAX提交保存事件
	 */
	function ajaxSubmitQuestion(form) {
		$.MessageBox.info("提交试题中", {delay: -1});
		var title = $("#paperTitle").val();
		form.find("input[name='question.paper.type']").val($("#paperType").val());
		form.find("input[name='question.paper.title']").val(title);
		form.find("input[name='question.paper.id']").val($("#paperId").val());
		var question = form.serialize();
		$.ajax({
			cache : true,
			type : "POST",
			url : form.attr("action"),
			data : question,
			async : false,
			error : function(request) {
				$(but).show();
				$.MessageBox.info("网络连接异常");
			},
			success : function(data) {
				if (data) {
					var pass = $.AjaxAuthFilter.checkSession("${ctx}/user/ajaxLogin.action", data, function(user) {
						ajaxSubmitQuestion(question);
					});

					if (pass) {
						$.MessageBox.info("操作成功");
						$("#paperId").val(data);
						$("#title").text(title);
						form.remove();
						if ($("#context .question").size() < 1) {
							addNewQuestion();
						}
					}
				}
			}
		});
	}

	
	/**
	 * 标题框选择事件
	 */
	function selectPaper(zhis){
		var title = $(zhis).find("option:selected").text();
		$("#paperId").val(zhis.value);
		$("#paperTitle").val(title);
		$("#title").text(title);
	}
	
	
	/**
	 * 工具栏激活效果
	 */
	function toolActive(boo){
		var back = $("#floatool-back");
		if(boo){
			back.addClass("floatool-back-active");
		}else{
			back.removeClass("floatool-back-active");
			
		}
		
	}
	/**
	 * 移除试题
	 */	
	function removeQuestion(zhis) {
		var form = $(zhis).parents("form");
		form.remove();
		$.MessageBox.info("操作成功"); 
		var quests = $("#context .question");
		quests.each(function(index,item){
			$(item).find(".index").each(function(i,it){
				$(it).text(index+1);
			});
		});
		if(quests.size()==1){
			quests.find(".removeBut").hide();
			
		}
		
	}
	var TemData =  {
			"question" : "",
			"language" : "",
			"langTitle" : "",
			"index" : 0,
			"orderIndex":0,
			"optNum":0,
			createNew: function () {
			function F() {	}
			F.prototype = this;
			return new F();
		}

	};
	/**
	 * 添加新试题
	 */
	function addNewQuestion(boo) {
		var curnum = $("#context .question").size() + 1;
		var data =  TemData.createNew();
		data.question = "question";
		data.index = curnum;
		data.optNum = 4;
		data.language = "CN";
		data.langTitle = "中文标题";
		data.orderIndex = 0;
		var summary = fillSummary(data);
		var form = $($("#tempForm").html());
		form.find(".summaryArea").append(summary);
		$("#context").append(form);
		if (!boo) {
			$.MessageBox.info("新建成功");
		}
	}

	var arr = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z");
	/**
	 * 用模板填充题干
	 */
	function fillSummary(values) {

		var summaryTemp = $("#tempSummary").html();
		var optionTemp = $("#tempOption").html();
		var summary = $(fillValue(summaryTemp, values));
		var oparea = summary.find(".optionsArea");

		for (var int = 0; int < values.optNum; int++) {
			var no = arr[int];
			var option = fillValue(optionTemp, values, {
				"optIndex" : int,
				"no" : no
			});
			oparea.append(option);
		}
		return summary;
	}
	/**
	 * 填充表达式值
	 */
	function fillValue(temp, values, oths) {
		return temp.replace(/\{\s*([^\}]*)\s*\}/g, function(word) {
			var key = word.replace(/^\{\s*|\s*\}$/g, "");
			var val = values[key];
			if (!val && oths) {
				val = oths[key];
			}
			//alert(key + "->" + val)
			return val;

		});
	}

	/**
	 * 添加选项
	 */
	function addOption(zhis) {
		var form = $(zhis).parents(".question");
		var optionTemp = $("#tempOption").html();
		var cnsummary = form.find(".CN");
		var int = cnsummary.find(".option").size();
		var no = arr[int];
		form.find(".summaryArea li").each(function(index, item) {
			var li = $(item);
			var model = li.attr("model");
			var language = li.attr("class");
			var option = fillValue(optionTemp, {
				"question" : model,
				"optIndex" : int,
				"no" : no,
				"language" : language
			});
			var oparea =li.find(".optionsArea");
			oparea.append(option);

		});
		return false;

	}
	/**
	 * 添加英文标题
	 */
	function toggleEnSummary(zhis) {
		var form = $(zhis).parents(".question");
		var enSummary = form.find(".EN");
		var hasEn = enSummary.size() > 0;

		if (!hasEn) {
			var cnsummary = form.find("li:first");
			var curnum = cnsummary.find(".index").text();
			var optnum = cnsummary.find(".option").size();
			cnsummary.find(".addEnBut").html("移除英文标题");

			var data = TemData.createNew();
			
			data.question = "question.accessorys[0]";
			data.index = curnum;
			data.optNum = optnum;
			data.language = "EN";
			data.langTitle = "英文标题";
			data.orderIndex = form.find("li").size();

			var ensummary = fillSummary(data);
			ensummary.find(".tool").remove();
			form.find(".summaryArea").append(ensummary);
			form.attr("hasEn", true);
			
			cnsummary.find(".option :checked").each(function(index,item){
				syncAnswerSelected(item);
			});
			

		} else {
			var boo = window.confirm("确定要移除英文题干吗？");
			if (boo) {
				enSummary.remove();
				form.find(".addEnBut").html("添加英文标题");
				form.attr("hasEn", false);
			}
		}
		return false;
	}
	
	
	function selectOption(zhis){
		syncAnswerSelected(zhis);
		var quest = $(zhis).parents(".question");
		var answ =undefined;
		quest.find("li:first .option input:checked").each(function() {
			if (answ == undefined) {
				answ = "";
			} else {
				answ = answ + ",";
			}
			answ = answ + this.title;
		});
		quest.find("input[name='question.answer']").val(answ);
		
	}

	$(function() {
		$.AjaxAuthFilter.init("${user.id}",{logined:updateUser,diff:function(user){
			$.MessageBox.info("登录用户不同，退回上层目录！",{callback:function(){
				window.location.href="${ctx}/exam/paperStore.action";
				
			}});
		}});
		
		
		if ($("#context .question").size() == 0) {
			addNewQuestion(true);
		}

		$("#paperPanel").dialog({
			autoOpen : false,
			modal : true,
			show : {
				effect : "blind",
				duration : 1000
			},
			hide : {
				effect : "explode",
				duration : 1000
			},
			buttons : {
				"确定" : function() {
					var form = $(this).data("form");
					$(this).dialog("close");
					ajaxSubmitQuestion(form);

				},
				"取消" : function() {
					$(this).dialog("close");
				}
			}
		});
	});
</script>

</head>

<body>
<%@include file="top.jsp"%>
<div id="floatpanel">
	<div id="floatool" class="width">
		<div id="floatool-back"></div>
		<div id="floatool-front">
			<a href="javascript:addNewQuestion()" title="新建试题" onmouseover="toolActive(true)" onmouseout="toolActive(false)"> + </a>
		</div>
	</div>
</div>
<div id="upload" class="width center radius paper">
	<div id="paperPanel">
		<input type="hidden" id="paperId" value="${paper.id}" />
		<div>
			标题: <input type="text" id="paperTitle" value="${paper.title}" /> 
			<select onchange="selectPaper(this)";>
				<option value="">--请选择--</option>
				<c:forEach var="paper" varStatus="vs" items="${papers }">
					<c:if test="${vs.index eq 0}">
						<c:set var="select" value="selected='selected'"></c:set>
					</c:if>
					<option ${select} value="${paper.id }">${paper.title }</option>
				</c:forEach>
			</select>
		</div>
		<div>
			类型: 
			<select id="paperType">
				<option value="${paper.type}"><z:dic code="${paper.type}" /></option>
			</select>
		</div>
	</div>
	<div class="examname">
		<h1>
			题库名称：<span id="title">${paper.title }</span>
		</h1>
	</div>
	<div id="context" class="context">
		<!-- 试题区域 -->
	</div>
</div>


<div id="template" style="display: none;">
	<div id="tempForm">
		<form action="${ctx}/exam/addQuestion.action" class="question">
			<input type="hidden" name="question.paper.id" value="${question.paper.id }" /> 
			<input type="hidden" name="question.paper.title" value="${question.paper.title }" /> 
			<input type="hidden" name="question.paper.type" value="${question.paper.type }" />
			<ul class="summaryArea">
				<!-- 试题内容区域 -->
			</ul>
			<div align="right">
				<div class="help radius" align="left">
					<div class="left">
						<label>答案：<input type="text" name="question.answer" style="width: 80px;text-align: center;" readonly="readonly" /></label>
					</div>
					<div class="right">

						<label>章节： <select name="question.chapter" style="width: 200px;">
								<z:dic code="${paper.type}" isType="true" />
						</select>
						</label>

					</div>
					<div class="clear">
						<textarea name="question.analysis" class="analysis"></textarea>
					</div>
				</div>
			</div>
			<div align="right">
				<input class="button gray small removeBut" type="button" value="移除" onclick="removeQuestion(this)" /> 
				<input class="button green small" type="button" value="添加" onclick="saveQuestion(this)" />
			</div>
		</form>
	</div>
	<div id="tempSummary">
	
		<li class="{language}" model="{question}" >
			<dl class="optionsArea">
				<dt class="title">
					<div class="left">
						题号：<span class="index">{index}</span> （{langTitle}）
					</div>
					<div class="right tool">
						<a href="#" onclick="return addOption(this)">添加选项</a> &nbsp; 
						<a class="addEnBut" href="#" onclick="return toggleEnSummary(this)">添加英文题干</a>
					</div>
					<div class="clear">
						<input type="hidden" name="{question}.language" value="{language}" />
						<input type="hidden" name="{question}.orderIndex"   />
						
						<textarea name="{question}.summary"></textarea>
					</div>
				</dt>
				<!-- 选项区域 -->
			</dl>
		</li>
		
	</div>

	<div id="tempOption">
		<dd class="option">
			<input type="checkbox" title="{no}"  name="{question}.options[{optIndex}].correct"  onclick="selectOption(this);" /> 
			<span>{no}.&nbsp;</span> 
			<input type="hidden" name="{question}.options[{optIndex}].no" value="{no}" /> 
			<input type="hidden" name="{question}.options[{optIndex}].language" value="{language}" /> 
			<input type="text"	name="{question}.options[{optIndex}].summary" />
		</dd>
	</div>
</div>
<%@include file="../core/bottom.jsp"%>
</body>
</html>
